<template>
  <div class="restaurant-dashboard">
    <!-- 顶部导航 -->
    <header class="dashboard-header">
      <h1>餐厅餐态盘</h1>
      <div class="header-controls">
        <div class="search-box">
          <input
              type="text"
              placeholder="搜索桌台编号..."
              v-model="searchQuery"
              @input="filterTables"
          >
          <i class="icon-search"></i>
        </div>
        <button class="refresh-btn" @click="refreshData">
          <i class="icon-refresh"></i> 刷新
        </button>
      </div>
    </header>

    <!-- 状态筛选 -->
    <div class="status-filters">
      <button
          v-for="status in statusTypes"
          :key="status.value"
          :class="['filter-btn', { active: activeStatus === status.value }]"
          @click="handleStatusFilter(status.value)"
      >
        <span class="status-dot" :style="{ backgroundColor: status.color }"></span>
        {{ status.label }}
        <span class="count-badge">{{ getStatusCount(status.value) }}</span>
      </button>
    </div>

    <!-- 桌台网格 -->
    <div class="tables-grid">
      <div
          v-for="table in filteredTables"
          :key="table.id"
          class="table-card"
          :class="`status-${table.status}`"
      >
        <div class="table-header">
          <h3>桌台 {{ table.tableNumber }}</h3>
          <span class="status-tag" :style="{ backgroundColor: getStatusColor(table.status) }">
            {{ getStatusLabel(table.status) }}
          </span>
        </div>
        <div class="table-info">
          <p><i class="icon-users"></i> 容量: {{ table.capacity }}人</p>
          <p v-if="table.status !== 'empty'"><i class="icon-clock"></i>
            {{ table.status === 'occupied' ? '已占用: ' : '已预订: ' }}
            {{ formatTime(table.time) }}
          </p>
          <p v-if="table.status === 'occupied'"><i class="icon-order"></i> 订单号: {{ table.orderId }}</p>
          <p v-if="table.status === 'reserved'"><i class="icon-name"></i> 预订人: {{ table.customerName }}</p>
        </div>
        <div class="table-actions">
          <button class="action-btn primary" @click="handleTableAction(table.id, 'edit')">
            编辑状态
          </button>
          <button class="action-btn secondary" @click="handleTableAction(table.id, 'detail')">
            详情
          </button>
        </div>
      </div>

      <div class="empty-state" v-if="filteredTables.length === 0">
        <i class="icon-empty"></i>
        <p>没有找到符合条件的桌台</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';

// 状态类型定义
const statusTypes = [
  { value: 'all', label: '全部', color: '#888' },
  { value: 'empty', label: '空桌', color: '#4CAF50' },
  { value: 'occupied', label: '占用', color: '#F44336' },
  { value: 'reserved', label: '预订', color: '#FFC107' },
  { value: 'cleaning', label: '清理中', color: '#9C27B0' }
];

// 模拟数据生成函数
const generateMockTables = () => {
  const statuses = ['empty', 'occupied', 'reserved', 'cleaning'];
  const tables = [];

  for (let i = 1; i <= 20; i++) {
    const status = statuses[Math.floor(Math.random() * statuses.length)];
    const now = new Date();

    // 随机生成时间（过去2小时到未来2小时）
    const timeOffset = Math.floor(Math.random() * 240) - 120; // -120到120分钟
    const tableTime = new Date(now.getTime() + timeOffset * 60000);

    tables.push({
      id: i,
      tableNumber: i,
      capacity: [2, 4, 6, 8][Math.floor(Math.random() * 4)],
      status,
      time: tableTime,
      orderId: status === 'occupied' ? `ORD${Math.floor(Math.random() * 10000).toString().padStart(4, '0')}` : null,
      customerName: status === 'reserved' ? `顾客${Math.floor(Math.random() * 1000)}` : null
    });
  }

  return tables;
};

// 响应式数据
const allTables = ref([]);
const filteredTables = ref([]);
const searchQuery = ref('');
const activeStatus = ref('all');

// 初始化数据
onMounted(() => {
  refreshData();
});

// 刷新数据
const refreshData = () => {
  allTables.value = generateMockTables();
  filterTables();
};

// 筛选桌台
const filterTables = () => {
  filteredTables.value = allTables.value.filter(table => {
    // 状态筛选
    const statusMatch = activeStatus.value === 'all' || table.status === activeStatus.value;
    // 搜索筛选
    const searchMatch = !searchQuery.value ||
        table.tableNumber.toString().includes(searchQuery.value);

    return statusMatch && searchMatch;
  });
};

// 处理状态筛选
const handleStatusFilter = (status) => {
  activeStatus.value = status;
  filterTables();
};

// 获取状态标签
const getStatusLabel = (status) => {
  const statusObj = statusTypes.find(item => item.value === status);
  return statusObj ? statusObj.label : '';
};

// 获取状态颜色
const getStatusColor = (status) => {
  const statusObj = statusTypes.find(item => item.value === status);
  return statusObj ? statusObj.color : '#ccc';
};

// 获取状态数量
const getStatusCount = (status) => {
  if (status === 'all') return allTables.value.length;
  return allTables.value.filter(table => table.status === status).length;
};

// 格式化时间
const formatTime = (date) => {
  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
};

// 处理桌台操作
const handleTableAction = (tableId, action) => {
  const table = allTables.value.find(t => t.id === tableId);
  if (action === 'edit') {
    alert(`编辑桌台 ${table.tableNumber} 的状态`);
    // 实际应用中这里会打开编辑对话框
  } else if (action === 'detail') {
    alert(`查看桌台 ${table.tableNumber} 的详情`);
    // 实际应用中这里会打开详情页
  }
};
</script>

<style scoped>
.restaurant-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e0e0e0;
}

.dashboard-header h1 {
  margin: 0;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.header-controls {
  display: flex;
  gap: 15px;
  align-items: center;
}

.search-box {
  position: relative;
}

.search-box input {
  padding: 8px 12px 8px 35px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  width: 220px;
  transition: all 0.3s ease;
}

.search-box input:focus {
  outline: none;
  border-color: #42b983;
  box-shadow: 0 0 0 2px rgba(66, 185, 131, 0.2);
  width: 250px;
}

.icon-search {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.refresh-btn {
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 15px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.refresh-btn:hover {
  background-color: #359e6d;
}

.status-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.filter-btn {
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 6px 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.filter-btn.active {
  background-color: #f0f7f0;
  border-color: #42b983;
  color: #359e6d;
}

.filter-btn:hover {
  border-color: #42b983;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.count-badge {
  background-color: #eee;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 12px;
  margin-left: 5px;
}

.tables-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.table-card {
  background-color: white;
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.table-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.table-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}

.table-card.status-empty::before {
  background-color: #4CAF50;
}

.table-card.status-occupied::before {
  background-color: #F44336;
}

.table-card.status-reserved::before {
  background-color: #FFC107;
}

.table-card.status-cleaning::before {
  background-color: #9C27B0;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.table-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
}

.status-tag {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: white;
  font-weight: 500;
}

.table-info {
  margin-bottom: 20px;
}

.table-info p {
  margin: 8px 0;
  color: #666;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  flex: 1;
  padding: 8px 0;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  border: none;
}

.action-btn.primary {
  background-color: #42b983;
  color: white;
}

.action-btn.primary:hover {
  background-color: #359e6d;
}

.action-btn.secondary {
  background-color: #f5f5f5;
  color: #666;
}

.action-btn.secondary:hover {
  background-color: #e9e9e9;
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.icon-empty {
  font-size: 48px;
  margin-bottom: 15px;
  display: inline-block;
}

/* 图标样式 */
[class^="icon-"] {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-users {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
}

.icon-clock {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
}

.icon-order {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7 10h2v7H7zm4-3h2v10h-2zm4 6h2v4h-2z'/%3E%3C/svg%3E");
}

.icon-name {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E");
}

.icon-refresh {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-8 3.58-8 8s3.58 8 8 8c3.78 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
}
</style>